<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        
        <title>Drawing</title>
        
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
	<script src="Drawing.js"></script>
        
        <style>
            header {
                background-color:black;
                color:white;
                clear:both;
                text-align:center;
                padding:5px; 
            }
            
            nav {
                line-height:30px;
                background-color:#eeeeee;
                height:400px;
                width:200px;
                float:left;
                padding:5px; 
            }
            
            section {
                width:350px;
                float:left;
                padding:10px; 
            }
            
            footer {
                background-color:black;
                color:white;
                clear:both;
                text-align:center;
                padding:5px; 
            }
        </style>
    </head>
    <body>
        <header>
            <h1>Draw picture!</h1>
        </header>
        
        <nav>
            <script>
                $(document).ready(function(){
                    $("button").click(function(){
                        $("p").click();
                    });
                });
            </script>
            <form action="Drawing.js">
                Color: <input type="text" name="color"><br>
                Height: <input type="text" name="height"><br>
                Width: <input type="text" name="width"><br>
                <button>Start drawing</button>
            </form>
        </nav>

        <section>
            <img id="imageContainer" alt="DrawingPicture"/>
        </section>

        <footer>
            Copyright © Group 3 IT Foundations
        </footer>      
    </body>
</html>